<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" href="/Sys/css/layui.css">
<link rel="stylesheet" href="/Sys/css/sign.css">

<link rel="stylesheet"
	href="/Sys/js/css/modules/layui-icon-extend/iconfont.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/Sys/css/font.css">
<link rel="stylesheet" href="/Sys/css/xadmin.css">
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/Sys/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>

<body>
<div id="main" style="width: 600px;height:400px;"></div>
       
</body>

<script type="text/javascript">


    
    var myChart = echarts.init(document.getElementById('main'));
     // 显示标题，图例和空的坐标轴
     myChart.setOption({
         title: {
             text: '注册学生班级统计'
         },
         tooltip: {},
         legend: {
             data:['人数']
         },
         xAxis: {
             data: []
         },
         yAxis: {},
         series: [{
             name: '人数',
             type: 'bar',
             data: []
         }]
     });
     
     myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
     
     var names=[];    //类别数组（实际用来盛放X轴坐标值）
     var nums=[];    //销量数组（实际用来盛放Y坐标值）
     
     $.ajax({
     type : "post",
     async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
     url : "stuParseDeal",    //请求发送到TestServlet处
     data : {},
     dataType : "json",        //返回数据形式为json
     success : function(result) {
         //请求成功时执行该函数内容，result即为服务器返回的json对象
         if (result) {
        	 for(var key in result){  
				  names.push(key);
				  nums.push(result[key])

        		}  
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '人数',
                        data: nums
                    }]
                });
         }
     
    },
     error : function(errorMsg) {
         //请求失败时执行该函数
     alert("图表请求数据失败!");
     myChart.hideLoading();
     }
})
    </script>



</html>